<h1>{% trans "System Information" %}</h1>
<table class="form">
    <tr>
        <th>{% trans "Hostname" %}</th>
        <td><span id="sysInfo_hostname" data-value="{{ local.hostname|force_escape }}">{{ local.hostname }}</span>
          <button data-dojo-type="dijit/form/Button">
            {% trans "Edit" %}
            <script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
              var editbtn = this;
              require([
                "dojo/dom",
                "dojo/dom-construct",
                "dojo/request/xhr",
                "dijit/TooltipDialog",
                "dijit/form/TextBox",
                "dijit/popup"
              ], function(
              dom,
              domConstruct,
              xhr,
              TooltipDialog,
              TextBox,
              popup
              ) {
                if(editbtn.get('editing') == true) {
                  editbtn.set('disabled', true);
                  xhr.post('{% url "network_hostname" %}', {
                    headers: {"X-CSRFToken": CSRFToken},
                    data: {"hostname": editbtn.get('textf').get('value')},
                    handleAs: 'json'
                  }).then(function(data) {
                    if(data.error == true) {
                      var td = new TooltipDialog({
                        content: data.errors.hostname[0],
                        onMouseLeave: function() {
                          popup.close(td);
                          td.destroyRecursive();
                        }
                      });
                      popup.open({
                        popup: td,
                        around: editbtn.get('textf').domNode,
                        orient: ["above", "after", "below-alt"]
                      });
                    } else {
                      editbtn.set('editing', false);
                      editbtn.set('label', 'Edit');
                      var host = dom.byId("sysInfo_hostname");
                      domConstruct.empty(host);
                      host.innerHTML = editbtn.get('textf').get('value');
                      host.setAttribute("data-value", editbtn.get('textf').get('value'));
                      editbtn.get('textf').destroyRecursive();
                    }
                    editbtn.set('disabled', false);
                  });
                } else {
                  editbtn.set('label', 'OK');
                  editbtn.set('editing', true);
                  var host = dom.byId("sysInfo_hostname");
                  domConstruct.empty(host);
                  var text = new TextBox({
                    value: host.getAttribute("data-value"),
                  });
                  text.placeAt(host);
                  editbtn.set('textf', text);
                }
              });
            </script>
          </button>
        </td>
    </tr>
    <tr>
        <th>{% trans "Build" %}</th>
        <td>{{ local.version }}</td>
    </tr>
    <tr>
        <th>{% trans "Platform" %}</th>
        <td>{{ local.model }}</td>
    </tr>
    <tr>
        <th>{% trans "Memory" %}</th>
        <td>{{ local.physmem }}</td>
    </tr>
    <tr>
        <th>{% trans "System Time" %}</th>
        <td>{{ local.datetime|date:"r" }}</td>
    </tr>
    <tr>
        <th>{% trans "Uptime" %}</th>
        <td class="descr">{{ local.uptime }}</td>
    </tr>
    <tr>
        <th>{% trans "Load Average" %}</th>
        <td class="descr">{{ local.loadavg }}</td>
    </tr>
    {% if local.system_manufacturer|lower == 'ixsystems' %}
    <tr>
        <th>{% trans "System Serial" %}</th>
        <td class="descr">{{ local.system_serial }}</td>
    </tr>
    <tr>
        <th>{% trans "System Product" %}</th>
        <td class="descr">{{ local.system_product }}</td>
    </tr>
    {% endif %}
    {% if not is_freenas %}
    <tr>
        <th>{% trans "License" %}</th>
        <td class="descr">
            {% if local.license %}
                {{ local.license }}
            {% else %}
                <span style="color: #ff0000;">{% trans "No license" %}</span>
            {% endif %}
        </td>
    </tr>
    {% endif %}
</table>

{% if standby %}
<h1>{% trans "System Information (Standby Node)" %}</h1>
<table class="form">
    <tr>
        <th>{% trans "Hostname" %}</th>
        <td>{{ standby.hostname }}</span>
        </td>
    </tr>
    <tr>
        <th>{% trans "Build" %}</th>
        <td>{{ standby.version }}</td>
    </tr>
    <tr>
        <th>{% trans "Platform" %}</th>
        <td>{{ standby.model }}</td>
    </tr>
    <tr>
        <th>{% trans "Memory" %}</th>
        <td>{{ standby.physmem }}</td>
    </tr>
    <tr>
        <th>{% trans "System Time" %}</th>
        <td>{{ standby.datetime|date:"r" }}</td>
    </tr>
    <tr>
        <th>{% trans "Uptime" %}</th>
        <td class="descr">{{ standby.uptime }}</td>
    </tr>
    <tr>
        <th>{% trans "Load Average" %}</th>
        <td class="descr">{{ standby.loadavg }}</td>
    </tr>
    {% if not is_freenas %}
    <tr>
        <th>{% trans "System Serial" %}</th>
        <td class="descr">{{ standby.system_serial }}</td>
    </tr>
    <tr>
        <th>{% trans "System Product" %}</th>
        <td class="descr">{{ standby.system_product }}</td>
    </tr>
    {% endif %}
</table>
{% endif %}
